<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Register Page</title>
        <link href="./../CSS/form.css" rel="stylesheet" type="text/css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </h:head>
    <h:body>
        <div style="margin: 0 auto;text-align: center;border-style: none">   
            <h:form id="registform" onsubmit="">
                <p:wizard widgetVar="wiz" flowListener="#{registerWizard.onFlowProcess}">
                    <p:tab id="Basic" title="Basic">
                        <p:panel header="Information">  
                            <h:messages errorClass="error"/>  
                            <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">  
                                <h:outputText value="UserName: *" />  
                                <p:inputText required="true" label="UserName" value="#{registerWizard.user.uid}" />  

                                <h:outputText value="Password: *" />  
                                <p:password value="#{registerWizard.user.pwd}" feedback="true" minLength="3" rendered="true" label="Password"/>

                                <h:outputText value="Confirm Password: " />  
                                <p:password value="#{registerWizard.user.confirm}" feedback="false" minLength="3" rendered="true" label="Confirm"/>
                            </h:panelGrid>  
                        </p:panel>  
                    </p:tab>  
                    <p:tab id="Details" title="Details">
                        <p:panel header="Information Details">  
                            <h:messages errorClass="error"/>  
                            <h:panelGrid columns="2" columnClasses="label, value">  
                                <h:outputText value="Full Name: *" />  
                                <p:inputText value="#{registerWizard.user.contact}" required="true" label="FullName"/>
                                <h:outputText value="City: " />  
                                <h:selectOneMenu value="#{registerWizard.user.city}">
                                    <f:selectItems value="#{registerWizard.user.item}"/>
                                </h:selectOneMenu>
                                <h:outputText value="Address: *" />  
                                <p:inputText value="#{registerWizard.user.address}" label="Address" requiredMessage="true"/>
                            </h:panelGrid>  
                        </p:panel>  
                    </p:tab>
                    <p:tab id="Contact" title="Contact">
                        <p:panel header="Contact Information">
                            <h:messages errorClass="error"/> 
                            <h:panelGrid columns="2" columnClasses="label, value">
                                <h:outputText value="Mobile: " />  
                                <p:inputText value="#{registerWizard.user.mobile}" required="true"/>  

                                <h:outputText value="Telephone: " />  
                                <p:inputText value="#{registerWizard.user.tele}" required="true"/>  

                                <h:outputText value="Email: " />  
                                <p:inputText value="#{registerWizard.user.email}" required="true"/>  
                            </h:panelGrid>
                        </p:panel>
                    </p:tab>
                    <p:tab id="Confirmation" title="Confirmation">
                        <p:panel header="Confirmation">
                            <p:growl id="growl" sticky="true" showDetail="true"/>  
                            <h:panelGrid id="confirmation" columns="4" width="200" bodyrows="10" cellspacing="15">
                                <h:outputText value="UserName: " style="font-style: oblique"/>
                                <h:outputText value="#{registerWizard.user.uid}"/>

                                <h:outputText value="Password: " style="font-style: oblique"/> 
                                <h:outputText value="#{registerWizard.user.pwd}"/> 

                                <h:outputText value="FullName: " style="font-style: oblique"/>  
                                <h:outputText value="#{registerWizard.user.contact}"/>  

                                <h:outputText value="Address: " style="font-style: oblique"/>  
                                <h:outputText value="#{registerWizard.user.address}"/>  

                                <h:outputText value="Mobile: " style="font-style: oblique"/>  
                                <h:outputText value="#{registerWizard.user.mobile}"/>  

                                <h:outputText value="Telephone: " style="font-style: oblique"/>  
                                <h:outputText value="#{registerWizard.user.tele}"/>  

                                <h:outputText value="Email: " style="font-style: oblique"/>  
                                <h:outputText value="#{registerWizard.user.email}"/>  
                            </h:panelGrid>
                            <p:commandButton value="Submit" update="growl"   
                                             actionListener="#{registerWizard.save}"/>
                        </p:panel>
                    </p:tab>
                </p:wizard>
                <p:ajaxStatus>  
                    <f:facet name="start">  
                        <h:graphicImage value="./../CSS/images/4Web/ajax-loader.gif" />  
                    </f:facet>  

                    <f:facet name="complete">  
                        <h:outputText value="" />  
                    </f:facet>  
                </p:ajaxStatus>
            </h:form>
        </div>
    </h:body>
</html>
